<template>
  <u-popup
    :show="show"
    @close="close"
    @open="open"
    :round="10"
    mode="bottom"
    closeable
  >
    <view class="popContent flex-col gap-12 p-12">
      <view class="text-18 color-black text-center"> 配送至 </view>
      <scroll-view scroll-y style="height: calc(70vh - 56px - 48rpx)">
        <view class="flex-col gap-12">
          <view
            class="shadow-card flex items-center justify-between"
            v-for="item in addressList"
            @click="setDefaultAddress(item)"
          >
            <view>
              <view class="text-bold text-14"
                >{{ item.consigneeName }}
                <text>{{ item.consigneePhone }}</text>
              </view>
              <view class="text-12 color-gray mt-12 pr-12">{{
                item.provinceName +
                " " +
                item.cityName +
                " " +
                item.areaName +
                " " +
                item.detailAddress
              }}</view>
            </view>
            <view
              :class="{
                radio: true,
                'active-radio': item.serialNo === defaultAddressId,
              }"
            >
              <u-icon name="checkbox-mark" color="#fff"></u-icon>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="footer px-12">
        <u-button
          type="primary"
          text="新增地址"
          @click="goAddAddress"
          shape="circle"
        ></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { fetchDeliveryAddressList } from "@/services/api";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      addressList: [],
      defaultAddressId: 111,
    };
  },
  methods: {
    close() {
      this.$emit("update:show", false);
    },
    open() {
      this.$emit("update:show", true);
      this.getAddressList();
    },
    setDefaultAddress(item) {
      this.defaultAddressId = item.serialNo;

      this.$emit("setAddress", item);
      this.close();
    },
    goAddAddress() {
      this.$Router.push({
        name: "addShippingAddress",
      });
    },
    async getAddressList() {
      const { data, error } = await fetchDeliveryAddressList();
      if (!error) {
        this.addressList = data;
        const defaultAddress = data.find((item) => item.defaultAddress);
        if (defaultAddress) {
          this.defaultAddressId = defaultAddress.serialNo;
          this.$emit("setAddress", defaultAddress);
        }
      }
    },
  },
  computed: {
    ...mapState("goods", ["defaultAddress"]),
  },
};
</script>

<style lang="scss" scoped>
.popContent {
  height: 70vh;
  position: relative;
  background: #f5f5f5;

  .shadow-card {
    padding: 24rpx;
    border-radius: 12rpx;
    background: white;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  }

  .radio {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active-radio {
    background: $u-primary;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
